<template>
<!--hah  -->
  <el-container>
    <el-header class="el-header">
      <div>
        <div style="text-align: left;display: inline-block;height: 20px" >
          <a href="">首页</a><el-divider direction="vertical"></el-divider>
          <a href="">个人中心</a><el-divider direction="vertical"></el-divider>
          <a href="">购物车</a><el-divider direction="vertical"></el-divider>
        </div>
        <div style=" display: inline-block" >
          <a href="">登录</a>
        </div>
      </div>
    </el-header>
    <br>
    <el-container>
      <el-aside width="200px" class="el-aside">
        <div style="margin-top: 100px">
          <div >热门动物查询
            <div > <div><img    class="animalPicture" src="imgs1/cat.png" > <el-button  class="animalButton" @click=selectKeyWords('宠物猫')>宠物猫</el-button></div></div>
            <div> <div><img  class="animalPicture"src="imgs1/dog.png"><el-button class="animalButton"@click=selectKeyWords('宠物狗')>宠物狗</el-button></div></div>
            <div> <div><img class="animalPicture"src="imgs1/shu.png"><el-button class="animalButton" @click=selectKeyWords('宠物鼠')>宠物鼠</el-button></div></div>
          </div >
          <div style="margin-top: 30px;font-size: 15px">
            <el-input
                placeholder="请输入关于宠物的关键字"
                prefix-icon="el-icon-search"
                v-model="input"
                clearable
                style="width: 180px;display: inline-block;font-size: 10px;">
            </el-input>
            <button  style="text-align: center">搜索</button>
          </div>
        </div>
      </el-aside>
      <el-main class="el-main">
        <el-row>
          <el-col :span="5"  v-for="p in arr"  >
            <el-card :body-style="{ padding: '20px'}"  shadow="always">
              <img :src="p.url" class="image" style="margin: 0;">
              <div style="padding: 0px;margin-top: 0px">
                <div style="margin-top: 0px;height: 20px">种类:猫  性别:女</div>
                <div style="margin: 0px;height: 20px">名字:白  年龄</div>
                <el-button   @click=animalDetail()>宠物详情</el-button>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: "animalsAdopt.vue"
}
</script>

<style scoped>
body{
  margin: 0;
  background-size: cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
  text-align: center;
}
.el-header{
  background-color: aliceblue;
  color: #333;
  text-align: center;
  line-height: 60px;
  max-height: 100px;
}

.el-aside {
  background-color: aliceblue;
  color: #333;
  text-align: center;
  line-height: 30px;
  left: 0;
  right: 0;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 20px;
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-size: cover;
}

body > el-container {
  margin-bottom: 40px;
}
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

button {
  padding: 0;
}

.image {
  width: 100%;
  height: auto;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.el-row {
  margin-bottom: 20px;
  height: 900px;
  display:flex;
  flex-wrap: wrap;
}
el-row  .el-card {
  min-width: 100%;
  height: 100%;
  margin-right: 20px;
  transition: all .5s;
}
.animalPicture{
  width: 40px;
  height: 40px;
}
.animalButton{
  margin-left: 10px;
  margin-top: 0px;
}
</style>